<template>
	<view class="wrap" @click="goDetail">
		<view class="leftContent">
			<text class="tag">{{activityType|activityType}}</text>
			<view class="tag2" v-if="isReferralBonuses == 0">推荐奖励</view>
			<image class="img" :src="activityUrl" mode=""></image>
		</view>

		<view class="rightContent">
			<view class="title">
				{{activityTitle}}
			</view>
			<view class="finishTimeWrap" v-if="finishTime != 0">
				距离活动结束还有
				<text class="finishTime">{{duration}}</text>
			</view>
			<view class="applyWrap">
				<view class="applyNum">
					<text>已参与:</text>
					<text class="finishTime">{{applyCount + '人'}}</text>
				</view>
				<view class="join">
					立即参加
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'activity-cell',
		data() {
			return {
				duration: ''
			}
		},
		props: {
			//活动id
			activityId: {
				type: String,
				default: ''
			},
			// 活动图片
			activityUrl: {
				type: String,
				default: ''
			},
			// 活动类型字符串
			activityType: {
				type: Number,
				default: -1
			},
			//优惠类型
			couponType: {
				type: String,
				default: ''
			},
			//活动标题
			activityTitle: {
				type: String,
				default: '一键加油 立减20元'
			},
			//距离活动结束时间
			finishTime: {
				type: Number,
				default: 0
			},
			//报名人数
			applyCount: {
				type: String,
				default: '100'
			},
			//是否推荐奖励
			isReferralBonuses: {
				type: Number,
				default: 1
			}
		},
		computed: {
			isLogin() {
				return this.$store.state.user.isLogin;
			}
		},
		mounted() {
			this.getDuritionTime();
		},

		methods: {
			getDuritionTime() {
				//获取当前时间的毫秒值
				var date = new Date();
				var timestap = date.getTime();
				//时间差
				var difftime = (this.finishTime * 1000 - timestap) / 1000;
				var days = parseInt(difftime / 86400); //天
				var hours = parseInt(difftime / 3600) - 24 * days; //时
				this.duration = days + '天' + hours + '小时';
			},

			goDetail() {
				let urls = [
					'/pagesB/activity/seckill/activityDetail-secondKill',
					'/pagesB/activity/gather/activityDetail-gather',
					'/pagesB/activity/peer/activityDetail-peer',
					'/pagesB/activity/lucky/activityDetail-sweepstakes',
				];

				if (this.activityType == 3) { //同行活动
					if (this.isLogin) {
						uni.navigateTo({
							url: urls[this.activityType - 1] + '?bizNo=' + this.activityId
						})
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}

				} else {
					uni.navigateTo({
						url: urls[this.activityType - 1] + '?bizNo=' + this.activityId
					})
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.wrap {
		background-color: #fff;
		border-radius: 16upx;
		display: flex;
		// margin: 30upx 32upx 0 40upx;
		margin: 15rpx auto;

		.leftContent {
			width: 320upx;
			height: 240upx;
			// background-color: #20C3AA;
			position: relative;

			.img {
				width: 320upx;
				height: 240upx;
			}

			.tag {
				position: absolute;
				left: 10upx;
				top: 10upx;
				background-color: #000000;
				color: #FFD394;
				padding: 12upx 14upx;
				border-radius: 8upx;
				font-size: 20upx;
			}

			.tag2 {
				position: absolute;
				bottom: 30upx;
				right: 0upx;
				font-size: 20upx;
				font-weight: bold;
				padding: 0 14upx;
				color: #232323;
				line-height: 38upx;
				background: linear-gradient(#fffcde 0%, #ffd291 100%);
				border-radius: 8upx 0px 0px 8upx;
				box-sizing: border-box;
			}

		}



		.rightContent {
			width: 348upx;
			height: 240upx;
			// background-color: #2979FF;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: bold;
				width: 330upx;
				font-size: 28upx;
				margin-top: 34upx;
				white-space: nowrap;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.finishTimeWrap {
				background-color: #F7F7F7;
				padding: 11upx 13upx;
				display: flex;
				color: #333;
				font-size: 20upx;
				margin-top: 10upx;
			}
		}
	}

	.applyWrap {
		display: flex;
		align-items: center;
		color: #333;
		font-size: 20upx;
		margin-top: 35upx;

		.join {
			background-color: $main-color;
			color: #FFFFFF;
			padding: 10upx 20upx;
			font-size: 24upx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: bold;
			border-radius: 8upx;
			margin-left: 9upx;
		}
	}


	.finishTime {
		color: #EC4863;
		margin-left: 10upx;
		font-size: 20upx;
		font-weight: bold;
	}
</style>
